<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Carousel Widget: Reveal Example</title>
        <!-- Some basic styles for all examples -->
        <link type="text/css" rel="stylesheet" href="css/common.css">
        <!-- Style the container, and set dimensions for the list items -->
        <link type="text/css" rel="stylesheet" href="css/carousel.css">
        <!-- Dependencies -->
        <link type="text/css" rel="stylesheet"
              href="../../../build/logger/assets/skins/sam/logger.css">
        <link type="text/css" rel="stylesheet"
              href="../../../build/carousel/assets/skins/sam/carousel.css">
        <script src="../../../build/yahoo/yahoo-debug.js"></script>
        <script src="../../../build/dom/dom-debug.js"></script>
        <script src="../../../build/event/event-debug.js"></script>
        <script src="../../../build/logger/logger-debug.js"></script>
        <script src="../../../build/element/element-debug.js"></script>
        <script src="../../../build/carousel/carousel-beta-debug.js"></script>
        <style type="text/css">
            #container {
                margin: 0 auto;
            }

            .yui-carousel-element li {
                height: 180px;
            }
        </style>
        <script>
            (function () {
                var myLogReader, carousel;
                
                YAHOO.util.Event.onDOMReady(function (ev) {
                    var myLogReader = new YAHOO.widget.LogReader(),
                        carousel    = new YAHOO.widget.Carousel("container", {
                            revealAmount: 25
                        });
                        
                    carousel.render(); // get ready for rendering the widget
                    carousel.show();   // display the widget
                });
            })();
        </script>
    </head>
    <body class="yui-skin-sam">
        <div id="main">
            <div class="promo">
                <h1>Carousel Widget: Reveal Example</h1>
                <div class="intro">
                    <p>
                        This example showcases a simple yet powerful feature
                        of the YUI Carousel Widget.  In this example, the
                        Carousel displays the previous and next elements
                        partially giving a sneak peak of the upcoming image
                        to the user.  The "revealAmount" configuration setting
                        accepts the percentage of the width of an item to
                        reveal.
                    </p>
                    <p>
                        In this example, you can use arrow keys to select items,
                        as well as click on an item to select it.  This feature
                        is a built-in functionality of the YUI Carousel widget.
                    </p>
                </div>
                <div class="example-container">
                    <!-- The Carousel container -->
                    <div id="container">
                        <ol id="carousel">
                            <li>
                                <img src="http://farm1.static.flickr.com/32/52955391_e7bed4c41f_m.jpg"
                                     height="180" width="240">
                            </li>
                            <li>
                                <img src="http://farm1.static.flickr.com/28/52955478_0a35209bbb_m.jpg"
                                     height="180" width="240">
                            </li>
                            <li>
                                <img src="http://farm1.static.flickr.com/26/52955086_df2cdece3d_m.jpg"
                                     height="180" width="240">
                            </li>
                            <li>
                                <img src="http://farm1.static.flickr.com/24/52956234_809467624f_m.jpg"
                                     height="180" width="240">
                            </li>
                            <li>
                                <img src="http://farm1.static.flickr.com/30/52954770_ef743b4afe_m.jpg"
                                     height="180" width="240">
                            </li>
                            <li>
                                <img src="http://farm1.static.flickr.com/33/52953744_1c4a4ffaaf_m.jpg"
                                     height="180" width="240">
                            </li>
                            <li>
                                <img src="http://farm1.static.flickr.com/26/52953668_33ea00edac_m.jpg"
                                     height="180" width="240">
                            </li>
                            <li>
                                <img src="http://farm1.static.flickr.com/32/52953229_28f32b92a1_m.jpg"
                                     height="180" width="240">
                            </li>
                            <li>
                                <img src="http://farm1.static.flickr.com/32/52953161_9e067407b2_m.jpg"
                                     height="180" width="240">
                            </li>
                            <li>
                                <img src="http://farm1.static.flickr.com/32/52953399_047d25504b_m.jpg"
                                     height="180" width="240">
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
            <h2>
                Using the Carousel Widget for revealing previous and next items
            </h2>
            <p>
                Here we will use the YUI Carousel Widget's "revealAmount"
                configuration setting to reveal the previous and next items
                partially.
            </p>
            <p>
                This example has the following dependencies:
            </p>
<textarea rows="5" cols="110" readonly>
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.5.2/build/carousel/assets/skins/sam/carousel.css">
<script src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/carousel/carousel-beta-min.js"></script>
</textarea>
            <p>
                This example uses progressive enhancement.  So, the Carousel is
                created from an "ordered" list of elements.
            </p>
<textarea rows="34" cols="110" readonly>
<div id="container">
  <ol>
    <li>
      <img src="http://farm1.static.flickr.com/32/52955391_e7bed4c41f_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/28/52955478_0a35209bbb_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/26/52955086_df2cdece3d_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/24/52956234_809467624f_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/30/52954770_ef743b4afe_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/33/52953744_1c4a4ffaaf_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/26/52953668_33ea00edac_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/32/52953229_28f32b92a1_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/32/52953161_9e067407b2_m.jpg"
           height="180" width="240">
    </li>
    <li>
      <img src="http://farm1.static.flickr.com/32/52953399_047d25504b_m.jpg"
           height="180" width="240"> 
   </li>
  </ol>
</div>
</textarea>
            <p>
                We'll have only one CSS rule to set the height for the Carousel
                items.
            </p>
<textarea rows="3" cols="110" readonly>
.yui-carousel-element li {
    height: 180px;
}
</textarea>
            <p>
                Since we have the elements in place, we can invoke the
                Carousel's constructor with the "revealAmount" configuration
		to create the widget.
            </p>
<textarea rows="8" cols="110" readonly>
YAHOO.util.Event.onDOMReady(function (ev) {
  var carousel = new YAHOO.widget.Carousel("container", {
    revealAmount: 25
  });
  carousel.render(); // get ready for rendering the widget
  carousel.show();   // display the widget
}
</textarea>
            <p>
                Lets put the pieces together.  The full JavaScript reads as
                follows:
            </p>
<textarea rows="14" cols="110" readonly>
(function () {
  var myLogReader, carousel;
  
  YAHOO.util.Event.onDOMReady(function (ev) {
    var myLogReader = new YAHOO.widget.LogReader(),
        carousel    = new YAHOO.widget.Carousel("container", {
          revealAmount: 25
        });
        
    carousel.render();
    carousel.show();
  });
})();
</textarea>
        </div>
    </body>
</html>
